<div class="row">
  <div class="col-xs-12">
    <a on-click="@this.toggle('_chat_expanded')">
      {{#_chat_expanded}}
        <span class="glyphicon glyphicon-chevron-up"></span> Hide chat
      {{else}}
        <span class="glyphicon glyphicon-chevron-down"></span> Show chat
      {{/}}
    </a>

    {{#_chat_expanded}}
      <div id="chat_log">
        {{#chat_log}}
          <p>
            <span class="chat-timestamp">{{format_timestamp(.timestamp, 'h:mm A')}}</span>
            <span class="chat-username">{{.from}}</span>
            <span class="chat-text">{{.text}}</span>
          </p>
        {{/}}
      </div>
      <form class="form" on-submit="@this.sendChatMessage()">
        <div class="form-group">
          <input
              type="text"
              class="form-control"
              id="chat_message"
              placeholder="Type your message here"
              value="{{chat_message}}"
              autocomplete="off"
          />
        </div>
      </form>
    {{/}}
  </div>
</div>
